<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-notice-bar :list="list" :current="current" :show="show" @iconClick="handleClose"></pure-notice-bar>
        </a-demo>

        <a-demo title="在左侧/顶部停靠一下">
            <pure-notice-bar :list="list" dock></pure-notice-bar>
            <a-gap></a-gap>
            <pure-notice-bar :list="list" dock vertical></pure-notice-bar>
        </a-demo>

        <a-demo title="纵向">
            <pure-notice-bar :list="list" :current="current" vertical></pure-notice-bar>
        </a-demo>

        <a-demo title="在左侧/顶部停靠一下">
            <pure-notice-bar :list="list" dock></pure-notice-bar>
            <a-gap></a-gap>
            <pure-notice-bar :list="list" dock vertical></pure-notice-bar>
        </a-demo>

        <a-demo title="始终停靠在左侧/顶部" desc="适用于一条数据时">
            <pure-notice-bar :list="list" dock dockTime="always"></pure-notice-bar>
            <a-gap></a-gap>
            <pure-notice-bar :list="list" dock dockTime="always" vertical></pure-notice-bar>
        </a-demo>

        <a-demo title="一行">
            <pure-notice-bar :list="list" dock class="pure-notice-bar-line-1"></pure-notice-bar>
            <a-gap></a-gap>
            <pure-notice-bar :list="list" dock class="pure-notice-bar-line-1" vertical></pure-notice-bar>
        </a-demo>

        <a-demo title="多行" desc="支持2-10行">
            <pure-notice-bar :list="list" dock class="pure-notice-bar-line-2"></pure-notice-bar>
            <a-gap></a-gap>
            <pure-notice-bar :list="list" dock class="pure-notice-bar-line-2" vertical></pure-notice-bar>
        </a-demo>

        <a-demo title="顶部对齐">
            <pure-notice-bar :list="list" dock
                class="pure-notice-bar-line-2 pure-notice-bar-align-top"></pure-notice-bar>
            <a-gap></a-gap>
            <pure-notice-bar :list="list" dock class="pure-notice-bar-line-2 pure-notice-bar-align-top"
                vertical></pure-notice-bar>
        </a-demo>

        <a-demo title="主题">
            <pure-notice-bar :list="list" :current="current" class="pure-notice-bar-primary"></pure-notice-bar>
            <a-gap></a-gap>
            <pure-notice-bar :list="list" :current="current" class="pure-notice-bar-success"></pure-notice-bar>
            <a-gap></a-gap>
            <pure-notice-bar :list="list" :current="current" class="pure-notice-bar-danger"></pure-notice-bar>
            <a-gap></a-gap>
            <pure-notice-bar :list="list" :current="current" class="pure-notice-bar-warning"></pure-notice-bar>
            <a-gap></a-gap>
            <pure-notice-bar :list="list" :current="current" class="pure-notice-bar-info"></pure-notice-bar>
        </a-demo>
    </view>
</template>

<script setup>
import { ref } from "vue";
import { onReady } from "@dcloudio/uni-app";

// 通知列表
const list = ref([]);

// 默认下标
const current = ref(0);

// 显示状态
const show = ref(true);

// 初始化数据
onReady(() => {
    initList();
});

// 初始化列表
function initList() {
    const _list = [
        { id: 1, text: "君不见，黄河之水天上来，奔流到海不复回。" },
        { id: 2, text: "君不见，高堂明镜悲白发，朝如青丝暮成雪。" },
        { id: 3, text: "人生得意须尽欢，莫使金樽空对月。" },
        { id: 4, text: "天生我材必有用，千金散尽还复来。" },
        { id: 5, text: "烹羊宰牛且为乐，会须一饮三百杯。" },
        { id: 6, text: "岑夫子，丹丘生，将进酒，杯莫停。" },
        { id: 7, text: "与君歌一曲，请君为我倾耳听。" },
        { id: 8, text: "钟鼓馔玉不足贵，但愿长醉不愿醒。" },
        { id: 9, text: "古来圣贤皆寂寞，惟有饮者留其名。" },
        { id: 10, text: "陈王昔时宴平乐，斗酒十千恣欢谑。" },
        { id: 11, text: "主人何为言少钱，径须沽取对君酌。" },
        { id: 12, text: "五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。" },
    ];
    setTimeout(() => {
        list.value = _list;
    }, 100);
}

// 关闭
function handleClose() {
    show.value = false;
    setTimeout(() => {
        show.value = true;
    }, 5000);
}
</script>

<style scoped>
.row {
    box-sizing: border-box;
    padding: 15px;
    background: var(--pure-background-element);
    margin: 10px 0;
    border-radius: 4px;
}
</style>
